<template>
    <div>
        <navigationBar :bgType="3" :backType="2" navigationTitle="售后详情" />
        <view class="top flex align-center" v-if="order.orders">
            <image
                v-if="order.status == 0"
                :src="`/static/static/technician/joinUs/lockW.png`"
            />
            <image
                v-if="order.status == 1"
                :src="`/static/static/technician/joinUs/yes.png`"
            />
            <image
                v-if="order.status == 2"
                :src="`/static/static/technician/joinUs/no.png`"
            />
            <view class="tip">
                <view class="title f-32">
                    {{ findstatus(order.status) }}
                </view>
                <view class="sub f-24">
                    <text v-if="order.status == 0">
                        您的退款申请已经提交，预计3-5个工作日内审核
                    </text>
                    <text v-if="order.status == 1">
                        恭喜您退款成功，金额已返回您原支付路径
                    </text>
                    <text v-if="order.status == 2">
                        原因：{{ order.why }}
                    </text>
                </view>
            </view>
        </view>
        <view class="content" v-if="order.orders">
            <view class="card">
                <view class="tit fb-28"> 退款项目 </view>
                <view class="sub f-26 flex align-center just-between">
                    <text class="order_sn" v-if="order.orders">
                        订单编号：{{ order.orders.order_sn }}
                    </text>
                </view>

                <view
                    class="orderInfo f-26 flex align-center"
                    v-if="order.orders"
                >
                    <view class="order flex align-center">
                        <image class="orderImg" :src="order.service_image" />
                        <view class="info fb-28">
                            <view class="title fb-30 flex column">
                                {{ order.service_name }}
                            </view>
                            <view
                                class="technician f-26"
                                v-if="order.technician"
                            >
                                服务师:{{ order.technician.name || "--" }}
                            </view>
                            <view class="time f-24 flex align-center">
                                <image
                                    class="lock"
                                    src="/static/static/technician/joinUs/lock.png"
                                />
                                <text> {{ order.orders.time_long }}分钟</text>
                            </view>
                            <view class="price fb-26"
                                >{{ order.orders.total_price }}
                            </view>
                        </view>
                    </view>
                </view>

                <view class="subInfo f-28" v-if="order.orders">
                    <view class="item">
                        <text class="tit">项目金额:</text>
                        <text class="price">{{
                            order.orders.service_price
                        }}</text>
                    </view>
                    <view class="item"  v-if="false">
                        <text class="tit">物料费:</text>
                        <text class="price">{{
                            order.orders.material_price
                        }}</text>
                    </view>
                    <view class="item line">
                        <view>
                            <text class="tit">车费:</text>
                        </view>
                        <text class="price">{{ order.orders.car_price }}</text>
                    </view>
                    <view class="item">
                        <text class="tit">合计:</text>
                        <text class="price allPrice">
                            {{ order.orders.total_price }}
                        </text>
                    </view>
                    <view class="item line-t">
                        <text class="tit">已退款:</text>
                        <text class="price allPrice">
                            {{ order.orders.refund_price }}
                        </text>
                    </view>
                </view>
            </view>

            <!-- 退款信息 -->
            <view class="card">
                <view class="tit fb-28"> 退款信息 </view>
                <view class="sub f-28">
                    <view class="items">
                        <text class="title">退款单号:</text>
                        <text class="subtit"> {{ order.out_refund_no }}</text>
                    </view>
                    <view class="items">
                        <text class="title">提交时间:</text>
                        <text class="subtit">{{ order.createtime_text }}</text>
                    </view>
                    <view class="iteml">
                        <text class="title">退款原因:</text>
                        <text class="subtit">
                            {{ order.refund_text || "--" }}
                        </text>
                    </view>
                    <view class="iteml">
                        <text class="title">图片备注:</text>
                        <view class="images" v-if="order.images.length">
                            <image
                                @click="previewImg(order.images)"
                                class="subimg"
                                v-for="(item, index) in order.images"
                                :key="index"
                                :src="item"
                            />
                        </view>
                        <text class="subtit" v-else>
                            未上传图片
                        </text>
                    </view>
                </view>
            </view>
        </view>
        <view class="btns" v-if="order.status !== 1 || false">
            <view class="btn" v-if="order.status == 0" @click="onCancel">
                撤销申请
            </view>
            <view class="btn" v-else @click="goPhone">联系客服</view>
        </view>
    </div>
</template>

<script>
import { refundDetail, cancelRefund } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            navigationHeight: this.$navigationHeight, // 导航栏高度
            orderID: "",
            order: {},
            technician: {},
        };
    },
    onLoad(options) {
        this.orderID = options.order_id;
        this.getData();
    },
    methods: {
        // 预览图片
        previewImg(imgs) {
            uni.previewImage({
                current: 0,
                urls: imgs,
            });
        },
        // 获取数据
        getData() {
            refundDetail({ details_id: this.orderID }).then((res) => {
                this.order = res.data;
            });
        },
        // 找到对应的状态
        findstatus(status) {
            if (status == 0) {
                return "等待审核";
            } else if (status == 1) {
                return "退款成功";
            } else if (status == 2) {
                return "退款失败";
            }
        },
        // 取消退款
        onCancel() {
            cancelRefund({ details_id: this.orderID })
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 800);
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.msg,
                        icon: "none",
                    });
                });
        },
        // 联系客服
        goPhone() {
            uni.makePhoneCall({
                phoneNumber: this.order.ServiceMobile,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.top {
    background: $theme-color;
    padding: 20rpx 20rpx 80rpx 20rpx;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    color: #fff;
    image {
        width: 52rpx;
        height: 52rpx;
        margin-right: 20rpx;
    }
    .tip {
        flex: 1;
        overflow: hidden;
        .title {
            margin-bottom: 16rpx;
        }
    }
}
.content {
    padding: 20rpx 20rpx 150rpx 20rpx;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    position: relative;
    top: -70rpx;
    .tit {
        margin-bottom: 20rpx;
    }
    .sub {
        margin-bottom: 20rpx;
        .order_sn {
            color: #333;
        }
    }
    .orderInfo {
        border-top: 2rpx solid #ececec;
        border-bottom: 2rpx solid #ececec;
        padding: 30rpx 0;
        box-sizing: border-box;
        .radio {
            width: 50rpx;
        }
        .order {
            flex: 1;
            .info {
                height: 100%;
                margin-left: 20rpx;
                > view {
                    line-height: 1.8;
                }
                .technician,
                .time {
                    color: #a3a3a3;
                    font-weight: normal;
                    > text {
                        margin-left: 6rpx;
                    }
                }
                .price {
                    color: #f43000;
                }
                .price::before {
                    content: "¥";
                    font-size: 22rpx;
                    margin-right: 6rpx;
                }
            }
        }
    }
    .subInfo {
        box-sizing: border-box;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20rpx 0;
            .tit {
                color: #333;
            }

            .tip {
                color: #f43000;
                margin: 0 0 0 20rpx;
            }
            .price::before {
                content: "¥";
                font-size: 28rpx;
                margin-right: 5rpx;
            }
            .allPrice {
                color: #f43000;
            }
        }
        .line {
            border-bottom: 2rpx solid #ececec;
        }
    }
    .items {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10rpx 0;
        .title {
            color: #333;
        }
        .subtit {
            color: #a3a3a3;
            margin-left: 10rpx;
        }
    }
    .iteml {
        display: flex;
        flex-direction: column;
        justify-content: baseline;
        padding: 10rpx 0;
        .title {
            color: #333;
        }
        .subtit {
            color: #a3a3a3;
            margin: 10rpx 0 0 0;
            word-break: break-all;
        }
    }
    .images {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        .subimg {
            width: 160rpx;
            height: 160rpx;
            border-radius: 20rpx;
            margin-right: 14rpx;
        }
    }
}
.card {
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx 24rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
}

.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
.lock {
    width: 24.15rpx;
    height: 24.15rpx;
}
.icon {
    width: 36rpx;
    height: 36rpx;
}
.orderImg {
    width: 176rpx;
    height: 176rpx;
    border-radius: 20rpx;
}
.line-t{
    border-top: 2rpx solid #ececec;
}
</style>